@primaryColor: #2080f0;
@successColor: #18a058;
@dangerColor: #d03050;
@warningColor: #f0a020;

@borderColor: #dcdee0;
@backgroundColor: #fff;
@textColor: #323233;
@textColor5: #fff;
@textColor2: #969799;
@placeholder: #969799;
@disabledOpacity: 0.5;
@borderRadius: 2px;

.o-form-input {
  height: 35px;
  margin-right: 1px;
  border-radius: 3px;
  @apply w-full dark:bg-zinc-800 bg-white px-2 border border-solid border-gray-300 dark:border-0 relative inline-block;

  .suffix-icon,
  .prefix-icon {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    height: 34px;
    box-sizing: content-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    i {
      @apply m-1;
      font-size: 16px;
      cursor: pointer;
      transition: all .3s;
      width: 16px;
      height: 16px;
      text-align: center;
      line-height: 16px;
      color: @textColor2;
    }

    .icon-close {
      font-size: 14px;
    }
  }

  .prefix-icon {
    left: 3px;
    right: auto;
  }

  .icon-close {
    display: none;
  }

  &:hover {
    .icon-close {
      display: block;
    }
  }

  .has-prefix {
    padding-left: 30px;
  }

  &.input-prepend,
  &.input-append {
    display: flex;
    justify-content: space-between;
    align-items: stretch;

    .prepend,
    .append {
      @apply border border-gray-300 dark:border-0;
      display: flex;
      align-items: center;
      padding: 0 5px;
    }

    .prepend {
      border-radius: 3px 0 0 3px;
      border-right: none;
      margin-right: -1px;
    }

    .append {
      border-radius: 0 3px 3px 0;
      border-left: none;
      margin-left: -1px;
    }
  }
}

.o-input-control {
  @apply bg-transparent overflow-hidden outline-none box-border w-full h-full;
  line-height: 34px;
  padding: 0 10px;
  font-size: 14px;
  transition: all .3s;

  &:hover {
    opacity: .7;
  }

  &:focus,
  &.focus {
    border-color: @primaryColor;
  }

  &::placeholder,
  &.placeholder {
    color: @placeholder;
  }

  /*禁用状态*/
  &.disabled {
    cursor: not-allowed;
    opacity: @disabledOpacity;
  }

  &.large {
    height: 40px;
    line-height: 40px;
  }

  &.small {
    height: 32px;
    line-height: 32px;
  }

  &.mini {
    height: 28px;
    line-height: 28px;
  }
}